<template>
	<div class="word-details">
		<van-nav-bar :border="false" placeholder fixed :title="wordInfo?.words" left-arrow @click-left="onBack">
		</van-nav-bar>
		<div class="wordInfo" v-if="wordInfo">
			<div class="flex-sub">
				<div class="flex justify-end padding-right-xs">
					<div class="play" @click="onPlay">
						<img src="@/assets/word/sound.png" class="sound" alt="" v-if="isShow" />
						<img src="@/assets/word/sound.gif" class="gif" alt="" v-else />
						<audio ref="audioRef" :src="wordInfo?.wordFile" @ended="ended" @play="play" />
					</div>
				</div>
				<div class="text-xsl text-bold text-center">{{ wordInfo?.words }}</div>
				<div class="text-center text-gray text-bold-sm margin-top-xs text-df">
					[{{ wordInfo?.symbol }}]
				</div>
				<div class="text-center text-gray text-bold margin-top-xs text-df">
					{{ wordInfo?.pretations }}
				</div>
				<div class="margin-lr-sm">
					<img class="pic" :src="wordInfo?.wordPic" alt="" />
				</div>
				<div class="text-bold-sm">
					<div class="cu-bar bg-white">
						<div class="action">
							<span class="cuIcon-titles text-green"></span>
							<span class="text-sm">例句</span>
						</div>
					</div>
					<div class="margin-lr-sm text-df">
						<div class="sentence">{{ wordInfo?.en }}</div>
						<div class="sentence">{{ wordInfo?.ch }}</div>
					</div>
				</div>
			</div>
			<div class="back" @click="onBack">
				<button class="cu-btn lg round bg-gradual-green text-white plan-sure">
					继续做题
				</button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { useRouter, useRoute } from "vue-router";
	import { onMounted, ref } from "vue";
	import {
		request
	} from "@/api/request";
	const router = useRouter();
	const route = useRoute();
	const wordInfo = ref();
	const audioRef = ref()
	const isShow = ref(true)
	onMounted(() => {
		getDetail()
	});
	const getDetail = async () => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/getWordsInfo`,
			method: 'get'
		}, {
			query: {
				words_id: route.query.words_id,
				versionId: route.query.versionId
			},
		}).then(res => {
			wordInfo.value = res.data
			if (wordInfo.value?.sentences) {
				let str = wordInfo.value?.sentences.split(".");
				wordInfo.value.en = str[0];
				wordInfo.value.ch = str[1] ? str[1] : str[2];
			}
		})
	};
	const ended = (val) => {
		isShow.value = true
	}
	const play = () => {
		isShow.value = false
	}
	const onPlay = () => {
		audioRef.value.play()
	}
	const onBack = () => {
		router.back();
	};
</script>

<style lang="scss" scoped>
	@import './style/icon.scss';
	@import './style/index.scss';
	@import './style/main.scss';

	:deep(.van-nav-bar) {
		color: #000;
		background: #fff;
	}

	:deep(.van-icon-arrow-left) {
		color: #000;
		font-size: 20px;
	}

	:deep(.van-nav-bar__title) {
		font-size: 18px;
		font-weight: 500;
		color: #000;
	}

	:deep(.van-tab__text) {
		font-size: 16px;
	}

	.word-details {
		height: 100%;
		padding: 0 10px;

		.wordInfo {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: calc(100% - 46px);
		}

		.play {
			width: 20px;
			height: 20px;
		}

		.sound {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		.gif {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		.mean {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 108px;
			gap: 10px;
			margin-top: 40px;

			&-item {
				position: relative;
				background-repeat: no-repeat;
				background-size: cover;
				border-radius: 10px;
				height: 108px;

				&-word {
					height: 30px;
					width: 100%;
					position: absolute;
					background-color: rgba($color: #000000, $alpha: 0.5);
					bottom: 0;
					border-radius: 10px;
					text-align: center;
					color: #fff;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.action {
			margin-left: 16px;
		}

		.pic {
			width: 100%;
			height: 180px;
			object-fit: cover;
			border-radius: 10px;
			margin-top: 40px;
			// margin-left: 30px;
			// margin-right: 30px;
			// padding: 0 20px;
			// margin: 40px 20px 20px 10px;
		}

		.sentence {
			line-height: 28px;
		}

		.back {
			display: flex;
			flex-direction: column;
			margin: 20px 0 34px 0;

			bottom {
				padding: 0;
			}
		}
	}
</style>